<script setup>
import { ref, reactive } from "vue";
import ListItem from "@/components/listItem.vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  remoteParams: {
    type: Object,
    default: () => ({})
  },
  type: {
    type: String,
    default: 'store'
  }
})

const pageData = reactive({
  popupData: []
})
const dict = uni.getStorageSync('dict')
const emit = defineEmits(['update:modelValue', 'change'])
const showPopup = ref(false)
const handlePopup = () => {
  console.log('props.modelValue', props.modelValue)
  if (!props.modelValue) return
  showPopup.value = true
  props.remoteParams.api(props.remoteParams.params).then(res => {
    pageData.popupData = res.data || res.rows
  })
}
const changeInput = (v) => {
  console.log('vvvv', v)
  emit('update:modelValue', v.detail.value)
}
const handleSelect = (i) => {
  console.log('i', i)
  showPopup.value = false
  emit('change', i)
  emit('update:modelValue', i.name)
}
</script>

<template>
  <view class="ipt-btn">
    <input :value="modelValue" style="width: calc(100% - 60px)" :disabled="disabled" :placeholder="placeholder" type="text" @input="changeInput" />
    <nut-button type="primary" :disabled="!modelValue" size="mini" @click="handlePopup">查询</nut-button>
  </view>
  <nut-popup v-model:visible="showPopup" :custom-style="{ height: '60%' }" position="bottom">
    <view style="padding: 10px 0 40px;">
      <view class="title">请选择卡口</view>
      <list-item v-for="(item, index) in pageData.popupData" :title="item.name" @click="handleSelect(item)">
        <template v-slot:right>
          {{ item.fzr }}
        </template>
        <template v-slot:desc>
          <view>包村干部：{{ item.cadre }}，片长：{{ item.manager }}</view>
          <view>部门包卡口：{{ item.dutyDept }}，包山领导：{{ item.leader }}</view>
        </template>
      </list-item>
      <nut-empty v-if="!pageData.popupData.length" image="empty" description="无内容"></nut-empty>
    </view>
  </nut-popup>
</template>

<style scoped lang="scss">
.title{display: flex;height: 40px;justify-content: center;align-items: center;font-size: 20px;color: #000;}
.ipt-btn{display: flex;justify-content: space-between;}
</style>
